import React, { useState } from 'react';
import { LaptopOutlined, SettingOutlined,AppstoreOutlined} from '@ant-design/icons';
import type { MenuProps } from 'antd';
import { Breadcrumb, Layout, Menu,theme } from 'antd';
import { Outlet,useNavigate } from 'react-router-dom';
import shuju from  '../../../router/shuju'
interface Props{}
interface ItemMenu{
  key:string
}
const { Header, Content, Sider } = Layout;
function CheckNav(props:Props) {
  var navigate = useNavigate();
  const [lujing, setLujing] = useState([]);
  var handleClick = ({ key,keyPath }:any) => {
    var lujing = keyPath.reverse()
    setLujing(lujing)
      console.log(key)
      navigate(key);
  }
    const {
        token: { colorBgContainer },
      } = theme.useToken();
    return (
        <div>
           <Layout>
        <Sider width={200} style={{ backgroundColor:'white' }}>
        <Menu mode="inline"  defaultSelectedKeys={['/index/checknav/check']} onClick={handleClick}>
                        
                          <Menu.SubMenu key="2" title="考勤管理" icon={<LaptopOutlined />}>

                                <Menu.Item key='/index/checknav/check' >
                                    考勤组管理
                                </Menu.Item>
                                <Menu.Item key='/index/checknav/class' >
                                    班次管理
                                </Menu.Item>
                                <Menu.Item key='/index/checknav/clock' >
                                    打卡方式
                                </Menu.Item>
                            </Menu.SubMenu>
                            <Menu.SubMenu key='3' title="考勤统计" icon={<AppstoreOutlined/>}>
                                <Menu.Item key='/index/checknav/sheet' >
                                    月考勤表
                                </Menu.Item>

                            </Menu.SubMenu>
                                <Menu.Item key='/index/checknav/set' icon={<SettingOutlined />} >
                                    设置
                          </Menu.Item>
                   
        </Menu>
            
        </Sider>
        <Layout style={{ padding: '0 24px 24px' }}>
          <Breadcrumb style={{ margin: '16px 0' }}>
            <Breadcrumb.Item>首页</Breadcrumb.Item>
             {
                lujing.map((item, index) => {
                  return (
                    <Breadcrumb.Item key={index}>{shuju[item]}</Breadcrumb.Item>
                  )
                })
              }
          </Breadcrumb>
          <Content
            style={{
              padding: 24,
              marginTop: 30,
              minHeight: 280,
              background: colorBgContainer,
            }}
          >
            <Outlet></Outlet>
          </Content>
        </Layout>
      </Layout> 
        </div>
    );
}

export default CheckNav;